<template>
    <el-dialog v-dialogDrag :title="!dataForm.pkShop ? '新增' : '修改'" :close-on-click-modal="false"
        :before-close="closeDailog" :visible.sync="visible">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">

            <el-tabs v-model="activeName">
                <el-tab-pane label="店铺基本信息" name="first">
                    <el-form-item label="店铺编号" prop="shop.shopCode">
                        <el-input v-model="dataForm.shop.shopCode" placeholder="店铺编号" maxlength="30" show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="店铺名称" prop="shop.shopName">
                        <el-input v-model="dataForm.shop.shopName" placeholder="店铺名称" maxlength="50" show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="店铺商城地址" prop="shop.shopEntry">
                        <el-input v-model="dataForm.shop.shopEntry" placeholder="店铺商城地址" maxlength="200"
                            show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="店铺图片" prop="shopPictureObj">
                        <ec-form-single-upload v-model="dataForm.shopPictureObj"></ec-form-single-upload>
                    </el-form-item>

                    <el-form-item label="店铺地址" prop="address">
                        <ec-address-cascader v-model="dataForm.address"></ec-address-cascader>
                    </el-form-item>
                    <el-form-item label="店铺详细地址" prop="shop.shopDetail">
                        <el-input v-model="dataForm.shop.shopDetail" placeholder="店铺详细地址" maxlength="50"
                            show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="店铺营业时间" prop="businessHour">
                        <el-time-picker is-range v-model="dataForm.businessHour" range-separator="至"
                            start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" clearable
                            value-format="HH:mm" format="HH:mm" selectableRange="00:00:00 - 00:00:00">
                        </el-time-picker>
                    </el-form-item>
                    <el-form-item label="生效" prop="shop.effectTime">
                        <el-date-picker v-model="dataForm.shop.effectTime" type="datetime" placeholder="选择生效日期时间"
                            default-time="00:00:00" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="失效" prop="shop.invalidTime">
                        <el-date-picker v-model="dataForm.shop.invalidTime" type="datetime" placeholder="选择失效日期时间"
                            default-time="00:00:00" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>

                </el-tab-pane>
                <el-tab-pane label="负责人信息" name="second">
                    <el-form-item label="来源" prop="shopHead.userSrc">
                        <el-input v-model="dataForm.shopHead.userSrc" placeholder="来源" maxlength="30" show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="名片" prop="shopHead.userLogo">
                        <el-input v-model="dataForm.shopHead.userLogo" placeholder="名片" maxlength="30" show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="shopHead.username">
                        <el-input v-model="dataForm.shopHead.username" placeholder="姓名" maxlength="30" show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="shopHead.userTel">
                        <el-input v-model="dataForm.shopHead.userTel" placeholder="联系电话" maxlength="30" show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="出生日期" prop="shopHead.userBirthday">
                        <el-input v-model="dataForm.shopHead.userBirthday" placeholder="出生日期" maxlength="30"
                            show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="shopHead.userSex">
                        <el-input v-model="dataForm.shopHead.userSex" placeholder="性别" maxlength="30" show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="民族" prop="shopHead.userNation">
                        <el-input v-model="dataForm.shopHead.userNation" placeholder="民族" maxlength="30"
                            show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="身分证号" prop="shopHead.userIdcard">
                        <el-input v-model="dataForm.shopHead.userIdcard" placeholder="身分证号" maxlength="30"
                            show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="身分证正面" prop="shopHead.userIdcardFront">
                        <el-input v-model="dataForm.shopHead.userIdcardFront" placeholder="身分证正面" maxlength="30"
                            show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="身分证反面" prop="shopHead.userIdcardReverse">
                        <el-input v-model="dataForm.shopHead.userIdcardReverse" placeholder="身分证反面" maxlength="30"
                            show-word-limit></el-input>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="关联信息" name="third">
                    <el-form-item label="所属集团" prop="shop.pkGroup">
                        <ec-group-tree-select v-model="dataForm.shop.pkGroup" placeholder="请选择所属集团">
                        </ec-group-tree-select>
                    </el-form-item>
                    <el-form-item label="所属组织" prop="shop.pkOrg">
                        <ec-org-tree-select :pkGroup="dataForm.shop.pkGroup" v-model="dataForm.shop.pkOrg"
                            placeholder="请选择所属组织">
                        </ec-org-tree-select>
                    </el-form-item>
                </el-tab-pane>
            </el-tabs>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeDailog()">取消</el-button>
            <el-button type="primary" :loading="submitLoading" @click="dataFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import * as aggShopService from '@/api/mall/aggshop'

    export default {
        data() {
            return {
                visible: false,
                submitLoading: false,
                uploadVisible: false,
                activeName: 'first',
                dataForm: {
                    shop: {
                        pkShop: undefined,
                        shopName: '',
                        shopEntry: '',
                        shopPicture: '',
                        shopCode: '',
                        shopAddress: '',
                        shopProvince: '',
                        shopCity: '',
                        shopArea: '',
                        shopDetail: '',
                        shopBusinessHour: '',
                        effectTime: '',
                        invalidTime: '',
                        revision: '',
                        createdBy: '',
                        createdTime: '',
                        updatedBy: '',
                        updatedTime: '',
                        deleFlag: '',
                        pkGroup: '',
                        pkOrg: ''
                    },
                    shopHead: {
                        pkShop: '',
                        pkUser: undefined,
                        userSrc: '',
                        userLogo: '',
                        username: '',
                        userTel: '',
                        userBirthday: '',
                        userSex: '',
                        userNation: '',
                        userIdcard: '',
                        userIdcardFront: '',
                        userIdcardReverse: '',
                        revision: '',
                        createdBy: '',
                        createdTime: '',
                        updatedBy: '',
                        updatedTime: '',
                        deleFlag: ''
                    },
                    address: [],
                    businessHour: ['00:00:00', '24:00:00'],
                    shopPictureObj: {}
                },
                dataRule: {
                    address: [{
                        required: false,
                        message: '店铺地址不能为空',
                        trigger: 'change'
                    }],
                    shop: {
                        shopName: [{
                            required: true,
                            message: '店铺名称不能为空',
                            trigger: 'blur'
                        }],

                        shopEntry: [{
                            required: true,
                            message: '店铺商城地址不能为空',
                            trigger: 'blur'
                        }],
                        shopPicture: [{
                            required: true,
                            message: '店铺图片不能为空',
                            trigger: 'blur'
                        }],
                        shopCode: [{
                            required: true,
                            message: '店铺编号不能为空',
                            trigger: 'blur'
                        }],
                        shopDetail: [{
                            required: false,
                            message: '店铺详细地址不能为空',
                            trigger: 'blur'
                        }],
                        businessHour: [{
                            required: true,
                            message: '店铺营业时间不能为空',
                            trigger: 'change'
                        }],
                        effectTime: [{
                            required: false,
                            message: '生效不能为空',
                            trigger: 'blur'
                        }],
                        invalidTime: [{
                            required: false,
                            message: '失效不能为空',
                            trigger: 'blur'
                        }],
                        pkGroup: [{
                            required: true,
                            message: '所属集团不能为空',
                            trigger: 'blur'
                        }],
                        pkOrg: [{
                            required: true,
                            message: '所属组织不能为空',
                            trigger: 'blur'
                        }]
                    },
                    shopHead: {
                        // userSrc: [{
                        //     required: true,
                        //     message: '负责人来源不能为空',
                        //     trigger: 'blur'
                        // }],
                        // userLogo: [{
                        //     required: true,
                        //     message: '负责人LOGO不能为空',
                        //     trigger: 'blur'
                        // }],
                        // username: [{
                        //     required: true,
                        //     message: '负责人姓名不能为空',
                        //     trigger: 'blur'
                        // }],
                        // userTel: [{
                        //     required: true,
                        //     message: '负责人电话不能为空',
                        //     trigger: 'blur'
                        // }],
                        // userBirthday: [{
                        //     required: true,
                        //     message: '出生日期不能为空',
                        //     trigger: 'blur'
                        // }],
                        // userSex: [{
                        //     required: true,
                        //     message: '负责人性别不能为空',
                        //     trigger: 'blur'
                        // }],
                        // userNation: [{
                        //     required: true,
                        //     message: '负责人名族不能为空',
                        //     trigger: 'blur'
                        // }],
                        // userIdcard: [{
                        //     required: true,
                        //     message: '负责人身分证不能为空',
                        //     trigger: 'blur'
                        // }],
                        // userIdcardFront: [{
                        //     required: true,
                        //     message: '负责人身分证正面不能为空',
                        //     trigger: 'blur'
                        // }],
                        // userIdcardReverse: [{
                        //     required: true,
                        //     message: '负责人身分证反面不能为空',
                        //     trigger: 'blur'
                        // }],
                    }
                }
            }
        },
        watch: {
            'dataForm.address': {
                handler() {
                    if (this.dataForm.address != null && this.dataForm.address.length > 0) {
                        this.dataForm.shop.shopProvince = this.dataForm.address[1]
                        this.dataForm.shop.shopCity = this.dataForm.address[2]
                        this.dataForm.shop.shopArea = this.dataForm.address[3]
                    } else {

                    }
                }
            },
            'dataForm.businessHour': {
                handler() {
                    if (this.dataForm.businessHour != null && this.dataForm.businessHour.length > 0) {
                        // console.log(this.dataForm.businessHour)`
                        this.dataForm.shop.shopBusinessHour = this.dataForm.businessHour.join('-')
                        // console.log(this.dataForm.shop.shopBusinessHour)
                    }
                }
            }
        },
        methods: {
            init(id) {
                this.dataForm.pkShop = id || 0
                this.visible = true
                this.activeName = 'first'
                this.$nextTick(() => {
                    this.$refs['dataForm'].resetFields()
                    if (this.dataForm.pkShop) {
                        aggShopService.getAggShopInfo(this.dataForm.pkShop).then(data => {
                            if (data.shop != null) {
                                this.dataForm.shop.pkShop = data.shop.pkShop
                                this.dataForm.shop.shopName = data.shop.shopName
                                this.dataForm.shop.shopEntry = data.shop.shopEntry
                                this.dataForm.shop.shopPicture = data.shop.shopPicture
                                this.dataForm.shop.shopCode = data.shop.shopCode
                                this.dataForm.shop.shopAddress = data.shop.shopAddress
                                this.dataForm.shop.shopProvince = data.shop.shopProvince
                                this.dataForm.shop.shopCity = data.shop.shopCity
                                this.dataForm.shop.shopArea = data.shop.shopArea
                                this.dataForm.shop.shopDetail = data.shop.shopDetail
                                this.dataForm.shop.shopBusinessHour = data.shop.shopBusinessHour
                                this.dataForm.shop.effectTime = data.shop.effectTime
                                this.dataForm.shop.invalidTime = data.shop.invalidTime
                                this.dataForm.shop.revision = data.shop.revision
                                this.dataForm.shop.pkGroup = data.shop.pkGroup
                                this.dataForm.shop.pkOrg = data.shop.pkOrg

                                // 营业时间
                                this.dataForm.businessHour = data.shop.shopBusinessHour.split("-")
                                // 店铺图片
                                if (data.shop.shopPictureObj && data.shop.shopPictureObj.url) {
                                    this.dataForm.shopPictureObj = data.shop.shopPictureObj
                                } else {
                                    this.dataForm.shopPictureObj = {
                                        id: "",
                                        mime: "",
                                        name: "",
                                        path: "",
                                        size: "",
                                        type: "",
                                        url: "",
                                    }
                                }
                                // 店铺地址
                                if (this.dataForm.shop.shopProvince && this.dataForm.shop.shopCity &&
                                    this.dataForm.shop.shopArea) {
                                    // this.dataForm.address= ["368100107951677440", "368100109646176256", "368100109679730688", "368100109725868032"]
                                    this.dataForm.address = ['368100107951677440',this.dataForm.shop.shopProvince, this
                                        .dataForm.shop.shopCity, this
                                        .dataForm.shop.shopArea
                                    ]
                                }
                                // console.log(this.dataForm.address)

                            }

                            if (data.shopHead != null) {
                                this.dataForm.shopHead.pkShop = data.shopHead.pkShop
                                this.dataForm.shopHead.pkUser = data.shopHead.pkUser
                                this.dataForm.shopHead.userSrc = data.shopHead.userSrc
                                this.dataForm.shopHead.userLogo = data.shopHead.userLogo
                                this.dataForm.shopHead.username = data.shopHead.username
                                this.dataForm.shopHead.userTel = data.shopHead.userTel
                                this.dataForm.shopHead.userBirthday = data.shopHead.userBirthday
                                this.dataForm.shopHead.userSex = data.shopHead.userSex
                                this.dataForm.shopHead.userNation = data.shopHead.userNation
                                this.dataForm.shopHead.userIdcard = data.shopHead.userIdcard
                                this.dataForm.shopHead.userIdcardFront = data.shopHead.userIdcardFront
                                this.dataForm.shopHead.userIdcardReverse = data.shopHead
                                    .userIdcardReverse
                                this.dataForm.shopHead.revision = data.shopHead.revision
                            }
                        })
                    }
                })
            },
            // 表单提交
            dataFormSubmit() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        this.submitLoading = true

                        // 处理图片
                        this.dataForm.shop.shopPicture = this.dataForm.shopPictureObj.id
                        var params = {
                            'shop': this.dataForm.shop,
                            'shopHead': this.dataForm.shopHead
                        }
                        var tick = !this.dataForm.pkShop ? aggShopService.addAggShop(params) : aggShopService
                            .updateAggShop(
                                params)
                        tick.then(data => {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.submitLoading = false
                                    this.visible = false
                                    this.$emit('refreshDataList')
                                }
                            })
                        }).catch((res) => {
                            this.submitLoading = false
                            this.closeDailog()
                        })
                    }
                })
            },
            closeDailog() {
                this.$refs['dataForm'].resetFields()
                this.visible = false
            },
            // 文件上传
            uploadInit() {
                this.uploadVisible = true
                this.$nextTick(() => {
                    this.$refs.formUpload.init()
                })
            },
        }
    }
</script>